<template>
    <div v-loading="loading" class="detail">
        <SavePage :title="info.number">
            <div slot="title">
                <span>巡查类型：{{ info.typeName }}</span>
            </div>
            <template v-if="info.typeName" slot="body">
                <TitleTips :title="info.typeName+'记录'" />
                <!-- 日常巡检和夜间巡查详情页面是一样的 -->
                <div v-if="info.type===1||info.type===2" class="base-info">
                    <el-row :gutter="24">
                        
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">公路名称：</span>
                            <span>{{ info.highwayName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查路段：</span>
                            <span>{{ formatStake(info) }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查日期：</span>
                            <span>{{ info.inspectDate }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查时段：</span>
                            <span>{{ info.inspectTime }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">天气：</span>
                            <span>{{ info.whetherName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查部门：</span>
                            <span>{{ info.deptName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查人员：</span>
                            <span>{{ info.inspectUsersName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">负责人：</span>
                            <span>{{ info.principalName }}</span>
                        </el-col>
                        <el-col :xl="24" :lg="8" class="item">
                            <span class="label">车载行车记录仪编号：</span>
                            <span>{{ info.dashcamNum }}</span>
                        </el-col>
                        <el-col :span="24" class="item">
                            <span class="label">巡查过程记录：</span>
                            <span>{{ info.inspectProcessRecord }}</span>
                        </el-col>
                    </el-row>
                    <div class="images-list">
                        <div class="label">图片：</div>
                        <div
                            v-if="info.resultContent&&info.resultContent[0]&&info.resultContent[0].photosArray"
                            class="images-container"
                        >
                            <ImageViewer :images="info.resultContent[0].photosArray" />
                        </div>
                    </div>
                    <template v-if="info.resultContent&&info.resultContent[0]">
                        <div style="margin-bottom:10px;font-size:14px">上报缺陷/故障/事件：</div>
                        <DetectTable
                            v-if="info.type===1"
                            key="daily"
                            :columns="dailyColumns"
                            :list="(info.resultContent[0].content||[]).map((el,index)=>{el.index = index+1;return el})"
                        />
                        <DetectTable
                            v-else
                            key="night"
                            :columns="nightColumns"
                            :list="(info.resultContent[0].content||[]).map((el,index)=>{el.index = index+1;return el})"
                        />
                    </template>
                </div>
                <!-- 经常性巡查详情页也大致一样，记录条目InspectionItem组件内部细分不同之处 -->
                <div v-else class="base-info">
                    <el-row :gutter="24">
                        
                        <el-col v-if="info.type===8" :xl="6" :lg="8" class="item">
                            <span class="label">巡查类型：</span>
                            <span>{{ info.typeName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">公路名称：</span>
                            <span>{{ info.highwayName }}</span>
                        </el-col>
                        <el-col v-if="info.type===8" :xl="6" :lg="8" class="item">
                            <span class="label">方向：</span>
                            <span>{{ info.directionName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查路段：</span>
                            <span>{{ formatStake(info) }}</span>
                        </el-col>
                        <template v-if="info.type===8">
                            <template v-if="info.associatedMaintType&&Number(info.associatedMaintType)!==1">
                                <el-col :xl="6" :lg="8" class="item">
                                    <span class="label">关联养护类型：</span>
                                    <span>{{ info.associatedMaintTypeName }}</span>
                                </el-col>
                                <el-col :xl="6" :lg="8" class="item">
                                    <span class="label">{{ info.associatedMaintTypeName }}：</span>
                                    <span>{{ info.associatedMaintName }}</span>
                                </el-col>
                            </template>
                            <el-col :xl="6" :lg="8" class="item">
                                <span class="label">巡查日期：</span>
                                <span>{{ info.inspectDate }}</span>
                            </el-col>
                            <el-col :xl="6" :lg="8" class="item">
                                <span class="label">巡查时段：</span>
                                <span>{{ info.inspectTime }}</span>
                            </el-col>
                        </template>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查部门：</span>
                            <span>{{ info.deptName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">巡查人员：</span>
                            <span>{{ info.inspectUsersName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">负责人：</span>
                            <span>{{ info.principalName }}</span>
                        </el-col>
                    </el-row>
                    <div v-if="info.resultContent">
                        <InspectionItem
                            v-for="(item, index) in info.resultContent"
                            :key="item.id"
                            :info="{...item, title: '巡查点'+(index+1), inspectionType:info.type}"
                            class="card-item"
                        />
                    </div>
                </div>
            </template>
        </SavePage>
    </div>
</template>

<script>
import ImageViewer from './components/image-viewer'
import DetectTable from './components/defect-table'
import InspectionItem from './components/inspection-item'

import { InspectionRecordModel } from '@/models'
const inspectionRecordModel = new InspectionRecordModel()
const locationTypes = {
    1: '设施',
    2: '桩号',
    3: '桩号范围',
    4: '机电设备'
}
const dailyColumns = [
    {
        attrs: {
            label: '序号',
            prop: 'index',
            width: '64',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '方向',
            prop: 'directionName',
            width: '80',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '位置类型',
            prop: 'locationType',
            formatter: (r, c, val) => {
                if (locationTypes[val]) {
                    return locationTypes[val]
                }
                return val
            },
            width: '130',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '位置/桩号',
            prop: 'location',
            width: '130',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '上报类型',
            prop: 'type',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    },
    {
        attrs: {
            label: '事件/问题描述',
            prop: 'description',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    },
    {
        attrs: {
            label: '单位',
            'show-overflow-tooltip': true,
            prop: 'unit',
            width: '80'
        }
    },
    {
        attrs: {
            label: '数量',
            prop: 'num',
            'show-overflow-tooltip': true,
            width: '80'
        }
    },
    {
        attrs: {
            label: '处置结果',
            prop: 'disposalResults',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    }
]
const nightColumns = [
    {
        attrs: {
            label: '序号',
            prop: 'index',
            width: '64',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '方向',
            prop: 'directionName',
            width: '80',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '位置类型',
            prop: 'locationType',
            formatter: (r, c, val) => {
                if (locationTypes[val]) {
                    return locationTypes[val]
                }
                return val
            },
            width: '130',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '位置/桩号',
            prop: 'location',
            width: '130',
            'show-overflow-tooltip': true
        }
    },
    {
        attrs: {
            label: '上报类型',
            prop: 'type',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    },
    {
        attrs: {
            label: '事件/问题描述',
            prop: 'description',
            'show-overflow-tooltip': true,
            'min-width': '140'
        }
    },
    {
        attrs: {
            label: '处置结果',
            prop: 'disposalResults',
            'show-overflow-tooltip': true,
            'min-width': '130'
        }
    }
]
export default {
    name: 'InspectionRecordDetail',
    components: {
        ImageViewer,
        DetectTable,
        InspectionItem
    },
    data() {
        return {
            loading: false,
            dailyColumns,
            nightColumns,
            info: {}
        }
    },
    created() {
        const { id = null, taskNumber = null } = this.$route.query
        this.getDetail(id, taskNumber)
    },
    methods: {
        getDetail(id, taskNumber) {
            this.loading = true
            inspectionRecordModel.detail({ id, taskNumber }).then(
                (res) => {
                    this.info = res
                    this.loading = false
                },
                () => {
                    this.loading = false
                }
            )
        },
        formatStake(info) {
            return `K${info.startStake1 ? info.startStake1 : '-'}+${info.endStake1 ? info.endStake1 : '-'} ~ K${info.startStake2 ? info.startStake2 : '-'}+${
                info.endStake2 ? info.endStake2 : '-'
            }`
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    width: 100%;
    .images-list {
        margin-bottom: 20px;
        display: flex;
        .label {
            width: 60px;
            font-size: 14px;
        }
        .images-container {
            width: calc(100% - 60px);
        }
    }
    .card-item:not(:last-child) {
        margin-bottom: 20px;
    }
}
</style>
